<template>
	<view class="goods-list-contanier">
		<view class="search">
			<view class="search-top flex-sb">
				<u-search placeholder="请输入关键字..." :showAction="false" height="30" :clearabled="true"
					v-model="options.search" @search="getGoodsListData">
				</u-search>
				<unt-icon name="icon-cart" size="22" :style="{marginLeft: '15px'}" @click="handleCart()"></unt-icon>
				<view class="show-view" @click="handleShowView()" style="margin-left: 15px;">
					<unt-icon v-if="showView" name="icon-qiapianxingshi" size="22"></unt-icon>
					<unt-icon v-else name="icon-liebiaoxingshi" size="22"></unt-icon>
				</view>
			</view>
			<view class="search-bottom flex-sb">
				<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
					<text>综合</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'sales_actual' }"
					@click="handleSortType('sales_actual')">
					<text>销量</text>
				</view>
				<view class="sort-item sort-item-price flex-sb" :class="{ active: sortType === 'goods_price_min' }"
					@click="handleSortType('goods_price_min')">
					<text>价格</text>
					<view class="price-arrow flex flex-column">
						<unt-icon name="icon-paixujiantoushang" :style='{marginBottom: "-10px"}' size="16"
							:color="sortType === 'goods_price_min' && !sortPrice?'#01ab36':'#000'"></unt-icon>
						<unt-icon name="icon-paixujiantouxia" :style='{marginTop: "-10px"}' size="16"
							:color="sortType === 'goods_price_min' && sortPrice?'#01ab36':'#000'"></unt-icon>
					</view>
				</view>
			</view>
		</view>
		<!--  列表-->
		<view class="shop-list" v-if="listData.length">
			<unt-shop-list :data="listData" :imgWidth="showView?'240rpx':'300rpx'"
				:imgHeight="showView?'240rpx':'300rpx'" :mode="showView?'list':'curd'"></unt-shop-list>
		</view>
		<!--  列表-->
		<!-- 空 -->
		<unt-empty v-else type="search"></unt-empty>
		<!--空  -->
	</view>
</template>

<script>
	import * as Goods from '@/api/goods/index.js'
	const showViewKey = 'GoodsList-ShowView';
	const pageSize = 10
	export default {
		data() {
			return {
				showView: true, // 列表显示方式 (true列表、false平铺)
				sortType: 'all', // 排序类型
				sortPrice: false, // 价格排序 (true高到低 false低到高)
				options: {},
				listData: [],
				// 上拉加载配置
				upOption: {
					page: 1,
					size: pageSize
				}
			}
		},
		onLoad(options) {
			this.options = options;
			this.getGoodsListData();
		},
		methods: {
			getGoodsListData() {
				let data = {
					keyword: this.options.search,
					orderKey: this.sortType == 'all' ? '' : this.sortType,
					orderType: this.sortPrice ? 'asc' : 'desc',
					pageSize: this.upOption.size,
					pageNum: this.upOption.page
				}
				Goods.list(data).then(result => {
					this.listData = result.data.list;
				}).catch()
			},
			// 切换排序方式
			handleSortType(newSortType) {
				const that = this;
				const newSortPrice = newSortType === 'goods_price_min' ? !that.sortPrice : true;
				that.sortType = newSortType;
				that.sortPrice = newSortPrice;
				this.getGoodsListData();
			},
			handleCart(){
				this.$unts.navTo('pages/cart/cart')
			},
			// 切换列表显示方式
			handleShowView() {
				this.showView = !this.showView;
				uni.setStorageSync(showViewKey, this.showView);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list-contanier {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		overflow: hidden;

		.search {
			width: 100%;
			padding: 20rpx 0rpx;
			background-color: #fff;
			box-shadow: 0 6rpx 20rpx #f2f3f4;

			.search-top {
				padding: 0rpx 20rpx;
			}

			.search-bottom {
				margin-top: 20rpx;
				padding: 0rpx 30rpx 20rpx 30rpx;

				.sort-item-price {
					.price-arrow {
						margin-left: 10rpx;
					}
				}

				.active {
					color: #01a601;
				}
			}
		}

		.shop-list {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			padding-bottom: 100rpx;
		}

	}
</style>